<template>
  <div class="text-line-height">
    <div class="crumbs-box">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/content/list?tabsName=Report' }">内容管理</el-breadcrumb-item>
        <el-breadcrumb-item>教研报告</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div v-if="listData" class="margin30">
      <div class="block-height">
        <div class="text-line-height">
          <div class="fl fs-14">
            <el-button v-if="listData.createType === 'ORIGINAL'" type="primary" size="mini" round>原创</el-button>
            <el-button v-if="listData.createType === 'REPRINT'" type="primary" size="mini" round>转载</el-button>
          </div>
          <div class="fl marginL10 fs-22 fw">{{ listData.title }}</div>
          <div class="fr">
            <el-button
              v-if="listData.manageState === 'UNAUDITED'"
              type="primary"
              plain
              @click="getAdopt('passed')"
            >通过</el-button>
            <el-button
              v-if="listData.manageState === 'UNAUDITED'"
              type="primary"
              @click="getAdopt('not_passed')"
            >不通过</el-button>

            <el-button type="primary" plain @click="journal">查看操作日志</el-button>
            <el-button type="primary" @click="revise">修改</el-button>

            <el-button
              v-if="listData.createType === 'ORIGINAL'"
              type="primary"
              plain
              @click="getUpdateReportCreateType('REPRINT')"
            >标记为转载</el-button>
            <el-button
              v-else
              type="primary"
              plain
              @click="getUpdateReportCreateType('ORIGINAL')"
            >保持原创</el-button>

            <el-button
              v-if="listData.manageState === 'NORMAL'"
              type="warning"
              size="medium"
              @click="getProcessStatus('disable_content')"
            >违规</el-button>

            <el-button
              v-if="listData.manageState === 'VIOLATE'"
              type="warning"
              size="medium"
              @click="getProcessStatus('enable')"
            >取消违规</el-button>

            <el-button type="danger">删除</el-button>
          </div>
        </div>
      </div>
      <div class="fs-12">
        <span v-for="(item, index) in listData.categoryList" :key="index">
          <span v-if="index == 0">{{ item }}</span>
          <span v-else>&nbsp;/&nbsp;{{ item }}</span>
        </span>
      </div>

      <div>
        <el-tag
          v-for="(item, index) in listData.tags"
          :key="index"
          type="info"
          class
          size="mini"
        >{{ item }}</el-tag>
      </div>
      <div class="marginL10">
        <div>
          <span>发布者：</span>
          <el-avatar
            class="avatar-size"
            style="transform: translateY(10px);"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
          <span>{{ listData.userName }}</span>
        </div>

        <el-row class="el-row marginT10">
          <el-col :span="18">
            <el-col v-if="listData.teachingResearch" :span="20">
              <div class="fs-16 fw marginT20">教研过程</div>
              <div style="border: 1px solid #ccc; padding: 10px;">
                <span class="fs-16 fw">
                  {{
                  listData.teachingResearch.title
                  }}
                </span>

                <div class="fs-12">
                  <span>发起人/机构名称</span>
                  <el-tag size="small" effect="dark">
                    {{
                    listData.teachingResearch.userName
                    }}
                  </el-tag>
                </div>

                <div class="fs-12">
                  <span
                    v-for="(item, index) in listData.teachingResearch
                      .categoryList"
                    :key="index"
                  >
                    <span v-if="index == 0">{{ item }}</span>
                    <span v-else>&nbsp;/&nbsp;{{ item }}</span>
                  </span>
                </div>
                <div class="fs-12 line-height20">
                  <el-tag
                    v-if="listData.teachingResearch.progress === 'NOT_STARTED'"
                    type="success"
                    effect="dark"
                    size="small"
                  >未开始</el-tag>
                  <el-tag
                    v-if="listData.teachingResearch.progress === 'STARTED'"
                    type="success"
                    effect="dark"
                    size="small"
                  >进行中</el-tag>
                  <el-tag
                    v-if="listData.teachingResearch.progress === 'ENDED'"
                    type="success"
                    effect="dark"
                    size="small"
                  >已结束</el-tag>
                  <span>{{ listData.teachingResearch.startTime }}</span>
                </div>
              </div>
            </el-col>

            <el-col :span="14" class="marginT30">
              <div class="fs-16 fw">报告内容</div>

              <FilesLayout :files-data="files" />
            </el-col>
          </el-col>

          <el-col :span="20" class="marginT10">
            <div class="fs-12" style="text-indent: 20px;" v-html="listData.textContent" />
          </el-col>

          <el-col :span="18">
            <div class="marginT30">
              <Comment
                :list="listData"
                :sub-id="$route.query.param"
                tabs-name="second"
                sub-type="TEACHING_RESEARCH_REPORT"
                :count-comment="listData.commentCount"
                :count-view="listData.viewCount"
                :count-thumb="listData.likeCount"
              />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <Journal :dialog-visible="journalVisible" :dialog-obj="journalObj" @Callback="getJournalCall" />
  </div>
</template>

<script>
import FilesLayout from '@/components/FilesLayout/index';
import Journal from '@/components/Journal/index';
import { getTeachingResearchReport, getComment, updateStatus, audit, processStatus, updateReportCreateType } from '@/api/content';
import Comment from '@/components/Comment/index';
export default {
  name: 'ReportDetail',
  components: {
    FilesLayout,
    Comment,
    Journal
  },
  data () {
    return {
      files: [],
      listData: null,
      journalVisible: false,
      journalObj: {
        sysEnums: null,
        targetId: null,
        userId: null
      }
    };
  },
  created () {
    if (!this.$route.query.param) {
      this.$router.push({
        path: '/activity/list',
        params: {
          tabsName: 'Report'
        }
      });
      return;
    } else {
      this.init();
    }
  },
  methods: {
    // 标记转载/原创
    getUpdateReportCreateType (status) {
      updateReportCreateType({
        createType: status,
        reportId: this.$route.query.param
      }).then(res => {
        this.listData.createType = status;
        this.$message({
          message: '操作成功',
          type: 'success'
        });
      });
    },
    // 审核 违规/取消违规
    getProcessStatus (targetType) {
      processStatus({
        result: targetType,
        targetId: this.$route.query.param,
        targetType: 'teaching_research_report'
      }).then(res => {
        var manageState;
        switch (targetType) {
          case 'disable_content':
            manageState = 'VIOLATE';
            break;
          case 'enable':
            manageState = 'NORMAL';
            break;
        }
        this.listData.manageState = manageState;

        this.$message({
          message: '操作成功',
          type: 'success'
        });
      });
    },

    // 日志
    journal () {
      this.journalObj = {
        sysEnums: [],
        targetId: this.$route.query.param,
        userId: null
      };
      this.journalVisible = true;
    },
    getJournalCall (obj) {
      this.journalVisible = obj;
    },
    // 修改
    revise () {
      this.$router.push({
        path: '/content/reportEditOrAdd',
        query: { param: this.$route.query.param }
      });
    },
    // 审核 通过/不通过
    getAdopt (auditResult) {
      audit({
        auditResult: auditResult,
        targetId: this.$route.query.param
      }).then(res => {
        console.log(res.data);
        // this.listData.status = auditResult
      });
    },
    init () {
      this.loading = true;
      getTeachingResearchReport(this.$route.query.param)
        .then(res => {
          this.listData = res.data;
          this.files = res.data.fileList;
          this.loading = res.loading;
          // this.listData.categoryList = ['分类', '子分类'];
        })
        .catch(error => {
          this.loading = false;
        });
    }
  }
};
</script>

<style scoped lang="scss">
.el-button {
  margin-left: 10px;
}
.block-height {
  height: 40px;
}
.text-line-height {
  line-height: 30px;
}
.avatar-size {
  width: 40px;
  height: 40px;
}
.text-line-height-30 {
  line-height: 30px;
}
.el-card-size {
  width: 700px;
}
.img-size {
  width: 100px;
  height: 100px;
}
.el-row-size {
  width: 700px;
  height: 100px;
}
.text-indent {
  text-indent: 50px;
}
.el-tab-pane-size {
  height: 700px;
  overflow: auto;
}
</style>
